<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客</title>
  <link rel="stylesheet" href="css/video_detail.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="js/video.js/dist/video-js.css">

</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<div class="content">
  <div class="videoDetail">

    <!--作者-->
    <div class="detail-info">

      <div class="detail-container">
        <div class="left">
          <h1 class="title">asdsasada</h1>
          <div class="info">
            <div class="category">
              <span class="type">主页</span>
              <span class="fa fa-angle-right"></span>
              <a href="asdsa"><span class="type">视频</span></a>
              <span class="fa fa-angle-right"></span>
              <span class="type">asdsa</span>
              <span class="fa fa-angle-right"></span>
              <span class="type">zxcz</span>
            </div>

            <span class="date">2017-5-6</span>
            <span class="_id">2222</span>
          </div>

          <div class="play-info">
            <div class="play-item">
              <span class="icon fa fa-youtube-play"></span>
              <span class="num">3</span>
            </div>

            <div class="play-item">
              <span class="icon fa fa-commenting"></span>
              <span class="num">1</span>
            </div>

            <div  class="play-item">


              <span class="icon fa fa-star"></span>
              <span id="jsLeftBtn" style="cursor: pointer" class="num">已收藏 </span>

              <!--<span class="icon fa fa-star-o"></span>-->
              <!--<span id="jsLeftBtn" style="cursor: pointer" class="num">收藏 </span>-->

            </div>
          </div>
        </div>
        <div class="right">
          <img src="images/avatar.png" width="68" height="68">
          <div class="user-info">
            <h1 class="name">{{$data->user->nickname}}</h1>
            <p class="desc">{{$data->user->info}}</p>
            <div class="welcome">
              <span>投稿: 17</span><span>粉丝: 17</span>
            </div>

            <div class="action">
              <a href="user.html"><div class="care"><span class="icon el-icon-plus"></span>关注</div></a>
              <div class="battery">充电</div>
            </div>
          </div>


        </div>
      </div>
    </div>

    <!--内容-->
    <div class="detail-content">
      <div class="detail-container">


        <div class="lesson-box" style="">


          <a  href="?video_id={{$loop->index}}">

            <div class="lesson-item active" style="">

            </div>

            <div class="lesson-item" style="">

            </div>

          </a>

        </div>


        <video
                id="my-player"
                class="video video-js"
                controls
                preload="auto"
                data-setup='{}'
        >
          <source src="http://ohae2zc8b.bkt.clouddn.com/xiaohai-video7281.657890271415" type="video/mp4"></source>
        </video>



        <div class="arc-toobar">
          <div class="item">
            <span class="icon fa fa-user"></span>
            <div class="content">
              <h2 class="title">分享</h2>
              <p class="num">192</p>
            </div>
          </div>
          <div class="item">
            <span class="icon fa fa-user"></span>
            <div class="content">
              <h2 class="title">分享</h2>
              <p class="num">192</p>
            </div>
          </div>
          <div class="item">
            <span class="icon fa fa-user"></span>
            <div class="content">
              <h2 class="title">分享</h2>
              <p class="num">192</p>
            </div>
          </div>
          <div class="item">
            <span class="icon fa fa-user"></span>
            <div class="content">
              <h2 class="title">分享</h2>
              <p class="num">192</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--评论-->
    <div class="detail-bottom">
      <div class="left">
        <div class="desc">asa</div>
        <div class="love other">
        </div>

        <div class="commit">
          <div class="commit-header">
            <div class="commit-desc">
              <span class="active">最新评论</span>
              <span>热门评论</span>
            </div>
            <div class="commit-fengye">
              <ul>
                <li class="active"><a href="?">0</a></li>
                <li><a href="?" class="page">1</a></li>
                <li class="none"><a href="">...</a></li>
              </ul>
            </div>
          </div>
          <div class="commit-left">

            <div class="comment-item" style="border-bottom: 1px solid rgba(7,17,27,0.4)">
              <div class="thumb">
                <img src="images/avatar.png" width="48" height="48">
              </div>
              <div class="commit-text">
                <textarea id="pust-comment" placeholder="请在这里添加上你的评论吧!"></textarea>
              </div>
              <div class="put-text" onclick="pust_comment()"><p>
                发表
              </p></div>
            </div>


            <div class="comment-item">
            <div class="thumb">
              <img src="images/1.jpg" width="48" height="48">
            </div>
            <div class="commit-text">

            </div>
          </div>
            <div class="comment-item">
              <div class="thumb">
                <img src="images/1.jpg" width="48" height="48">
              </div>
              <div class="commit-text">

              </div>
            </div>
            <div class="comment-item">
              <div class="thumb">
                <img src="images/1.jpg" width="48" height="48">
              </div>
              <div class="commit-text">

              </div>
            </div>
            <div class="comment-item">
              <div class="thumb">
                <img src="images/1.jpg" width="48" height="48">
              </div>
              <div class="commit-text">

              </div>
            </div>

          </div>
          <div class="commit-right">

          </div>
        </div>
      </div>

      <div class="right"></div>
    </div>
  </div>

</div>

</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="js/video.js/dist/video.min.js"></script>

<script>
  $('#jsLeftBtn').on('click', function(){
    add_fav($(this), '{{$data->id}}', 1);
  });
  function add_fav(current_elem, fav_id, fav_type){
    $.ajax({
      cache: false,
      type: "POST",
      dataType: 'json',
      url:"{{url('api/favourite/create/')}}",
      data:{'fav_id':fav_id, 'fav_type':fav_type,
        '_token' :"{{csrf_token()}}" },
      async: true,
      success: function(data) {
        if(data.status == 0){
          current_elem.text(data.message)
        }else{
          window.location.href="/login/";
        }
      },
    });
  }

  function pust_comment(){
    $.ajax({
      cache: false,
      type: "POST",
      dataType: 'json',
      url:"{{url('api/comments/create/')}}",
      data:{'comments_type':1, 'comments_id': '{{$data->id}}', 'comments': $('#pust-comment').val(),
        '_token' :"{{csrf_token()}}" },
      async: true,
      success: function(data) {
        console.log(data);
        if(data.status == 0){
          location.replace(location.href);
        }else{
          alert('添加视频，可能需要登录或者其他的原因')
        }
      },
    });
  }

  $(function () {
    var options = {};

    var player = videojs('my-player', options, function onPlayerReady() {
      videojs.log('Your player is ready!');

      // In this context, `this` is the player that was created by Video.js.


      // How about an event listener?
      this.on('ended', function() {
        videojs.log('Awww...over so soon?!');
      });
    });
  })
</script>
</html>